<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/englishList' }">英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>我所追求的生活</h3>
    </div>
    <div class="content">
      <p>That must be the story of innumerable couples,and the pattern of lifeof life it offers has a homely grace.It reminds you of a placid rivulet,meandering smoohtly through green pastures and shaded by pleasant trees,till at last it falls into the vasty sea;but the sea is so calm,so silent,so infifferent,that you are troubled suddently by a vague uneasiness.Perhaps it is only by a kink in my nature,strong in me even in those days,that i felt in such an existence,the share of the great majority,something amiss.I recognized its social value.I saw its ordered happiness,but a fever in my blood asked for a wilder course.There seemed to me something alarming in such easy delights.In my heart was desire to live more dangerously.I was not unprepared for jagged rocks and treacherous,shoals it I could only have change-change and the exicitement of unforeseen.</p>
      <p>这一定是世间无数对夫妻的生活写照，这种生活模式给人一种天伦之美。它使人想起一条平静的溪流，蜿蜒畅游过绿茵的草场，浓荫遮蔽，最后注入烟波浩渺的汪洋大海；但是大海太过平静，太过沉默，太过不动声色，你会突然感到莫名的不安。也许这只是我自己的一种怪诞想法，在那样的时代，这想法对我影响很深：我觉得这像大多数人一样的生活，似乎欠缺了一点儿什么。我承认这种生活有社会价值，我也看到了它那井然有序的幸福，但我血液里的冲动却渴望一种更桀骜不驯的旅程．这样的安逸中好像有一种叫我惊惧不安的东西．我的心渴望一种更加惊险的生活。只要生活中还能有变迁———以及不可知的刺激，我愿意踏上怪石嶙峋的山崖，奔赴暗礁满布的海滩。</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
